<template>
  <el-dialog title="通道交易限制" :visible.sync="dialogVisible" width="70%" :close-on-click-modal="false">
    <el-form ref="main-form" :model="form" :rules="rules" label-width="280px" :inline="true">
      <el-form-item label="通道编号" size="mini">
        <el-input v-model="form.channelNo" @keyup.enter.native="submit" disabled></el-input>
      </el-form-item>

      <el-form-item label="通道名称" size="mini">
        <el-input v-model="form.channelName" @keyup.enter.native="submit" disabled></el-input>
      </el-form-item>

      <el-form-item label="日交易笔数限制（单位笔）" size="mini">
        <el-input type="number" v-model="form.dayCountLimit" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>

      <el-form-item label="月交易笔数限制（单位笔）" size="mini">
        <el-input type="number" v-model="form.monthCountLimit" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>

      <el-form-item label="日交易总金额限制（单位元）" size="mini">
        <el-input type="number" v-model="form.dayAmountLimit" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>

      <el-form-item label="月交易总金额限制（单位元）" size="mini">
        <el-input type="number" v-model="form.monthAmountLimit" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>

      <el-form-item label="日交易总金额限制阈值（百分比0-100）" size="mini">
        <el-input type="number" v-model="form.dayAmountThreshold" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>

      <el-form-item label="月交易总金额限制阈值（百分比0-100）" size="mini">
        <el-input type="number" v-model="form.monthAmountThreshold" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>
      <el-form-item label="单笔最小金额限制" size="mini">
        <el-input type="number" v-model="form.amountMin" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>
      <el-form-item label="单笔最大金额限制" size="mini">
        <el-input type="number" v-model="form.amountLimit" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>

    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close" size="small">取 消</el-button>
      <el-button type="primary" @click="submit" size="small" :loading="loading">提 交</el-button>
    </div>
  </el-dialog>
</template>

<script>

import ApiMain from '@/api/bank.channel';

export default {
  mixins: [
  ],
  props: [
  ],
  data() {
    return {

      dialogVisible: false,
      popDeleteVisible: false,
      loading: false,

      form: {
        channelNo: '',
        channelName: '',
        monthCountLimit: '',
        dayAmountLimit: '',
        monthAmountLimit: '',
        dayAmountThreshold: '',
        monthAmountThreshold: '',
        amountLimit: "",
        amountMin: ""
      },

      rules: {},

      id: null,
      data: null,
    }
  },

  methods: {

    show(id = null) {

      this.id = id;

      if (this.id) {
        this.fetchData();
      }
      else {
        this.reset();
      }

      this.dialogVisible = true;
    },

    close() {
      this.dialogVisible = false;
      this.$emit('dialog-close');
    },

    reset() {
      this.form = {
        channelNo: '',
        channelName: '',
        dayCountLimit: '',
        monthCountLimit: '',
        dayAmountLimit: '',
        monthAmountLimit: '',
        dayAmountThreshold: '',
        monthAmountThreshold: '',
        amountLimit: "",
        amountMin: "",

      };
    },

    fetchData() {
      ApiMain.info({ id: this.id })
        .then(re => {
          this.data = re;
        })
        .catch(() => {
          this.data = null;
        })
        .finally(() => {
          this.renderData();
        });
    },

    renderData() {
      this.form = {
        channelNo: this.data.channelNo,
        channelName: this.data.channelName,
        dayCountLimit: this.data.dayCountLimit,
        monthCountLimit: this.data.monthCountLimit,
        dayAmountLimit: this.data.dayAmountLimit / 100,
        monthAmountLimit: this.data.monthAmountLimit / 100,
        dayAmountThreshold: this.data.dayAmountThreshold,
        monthAmountThreshold: this.data.monthAmountThreshold,
        amountLimit: this.data.amountLimit / 100,
        amountMin: this.data.amountMin / 100,
      }
    },

    verifyForm() {
      var bool = true;
      this.$refs['main-form'].validate((valid) => bool = valid);
      return bool;
    },

    async submit() {
      if (!this.verifyForm()) return false;

      if (this.form.dayCountLimit <= 0) {
        this.$message.info('调度通道每日交易总单数应大于0')
        return
      }
      if (this.form.monthCountLimit <= 0) {
        this.$message.info('调度通道每月交易总单数应大于0')
        return
      }
      if (this.form.dayAmountLimit <= 0) {
        this.$message.info('调度通道每日交易总金额应大于0')
        return
      }
      if (this.form.amountLimit <= 0) {
        this.$message.info('单笔最大金额应大于0')
        return
      }

      if (this.form.amountMin < 0) {
        this.$message.info('单笔最小金额应大于或者等于0')
        return
      }
      if (this.form.monthAmountLimit <= 0) {
        this.$message.info('调度通道每月交易总金额应大于0')
        return
      }
      if (this.form.dayAmountThreshold <= 0 || this.form.dayAmountThreshold > 100) {
        this.$message.info('调度通道每日交易总金额阈值应在0-100区间')
        return
      }
      if (this.form.monthAmountThreshold <= 0 || this.form.monthAmountThreshold > 100) {
        this.$message.info('调度通道每月交易总金额阈值应在0-100区间')
        return
      }

      this.loading = true;

      try {
        await this.submitSet();
      } finally {
        this.loading = false;
      }
    },

    async submitSet() {

      this.form.id = this.id;

      let form = this.handleTradeLimit()
      await ApiMain.setTradeLimit(form);
      this.$message({ message: '修改成功', type: 'success' });
      this.close();

    },

    handleTradeLimit() {
      let form = JSON.parse(JSON.stringify(this.form))
      form.dayCountLimit = form.dayCountLimit == '' ? 0 : form.dayCountLimit
      form.monthCountLimit = form.monthCountLimit == '' ? 0 : form.monthCountLimit
      form.dayAmountLimit = form.dayAmountLimit == '' ? 0 : form.dayAmountLimit * 100
      form.monthAmountLimit = form.monthAmountLimit == '' ? 0 : form.monthAmountLimit * 100
      form.dayAmountThreshold = form.dayAmountThreshold == '' ? 0 : form.dayAmountThreshold
      form.monthAmountThreshold = form.monthAmountThreshold == '' ? 0 : form.monthAmountThreshold
      form.amountMin = form.amountMin == '' ? 0 : form.amountMin * 100
      form.amountLimit = form.amountLimit == '' ? 0 : form.amountLimit * 100
      return form
    },

  }
}
</script>

<style>
</style>
